<template>
    <div>
        <div id="indexbg">
            <exit></exit>
            <label for="dlie"><img :src="images" alt=""></label>
            <input type="file" @change="onFileChange" name=""  id="dlie">
            <strong>24age</strong>
            <p>毛方杰</p>
        </div>
        <flex></flex>
    </div>
</template>

<script>
    import flex from "./fiex_tab.vue"
    import exit from "./exit.vue"
    export default {
        data (){
            return {
                images : require('../assets/img/2.jpg')

            }
        },
        components : {
            flex,
            exit
        },
        methods:{
            onFileChange (e) {
                var files = e.target.files || e.dataTransfer.files
                if (!files.length) return
                this.createImage(files)
            },
            createImage (file) {
                var vm = this
                var reader = null
                var leng = file.length
                for (var i = 0; i < leng; i++) {
                    reader = new window.FileReader()
                    reader.readAsDataURL(file[i])
                    reader.onload = function (e) {
                         vm.images=e.target.result
                    }
                }
            }
        }
    }
</script>

<style scoped>
    #indexbg{background: url("../assets/img/timg.jpg") repeat;width: 100%;height: 300px;}
    #indexbg label{width: 150px;height: 150px;display: block;position: relative;top:10%;left: 50%;margin-left: -75px;
        border-radius: 100%;overflow: hidden;}
    #indexbg label>img{max-height: 100%;max-width: 100%;}
    #indexbg strong{font-size: 18px;display: inline-block;width: 100%;text-align: center;position: relative;top:45px;font-weight: bold;}
    #indexbg p{text-align: center;margin-top: 60px;font-size:30px;font-weight: bold;text-shadow: 3px 2px 4px #4096ee;color: #4096ee;height: 30px;line-height: 30px}
    #dlie{position: absolute;z-index: -10}
</style>